<template>
  <div>
    <PageList>
      <template #header>实时定位</template>
      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人员实时定位" name="peoplePositioning">
            <ListFilter :form="peopleFilter" :key-list="peopleKeyList" @search="searchHandle" @reset="resetHandle"></ListFilter>
          </el-tab-pane>
          <el-tab-pane label="车辆实时定位" name="carPositioning">
            <ListFilter :form="carFilter" :key-list="carKeyList" @search="searchHandle" @reset="resetHandle"></ListFilter>
          </el-tab-pane>
        </el-tabs>
      </template>
    </PageList>
    <component :is="activeName"></component>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import { area, department, work } from '@/api/api'

  export default {
    components: {
      ListFilter,
      carPositioning: () => import('./components/carPositioning'),
      peoplePositioning: () => import('./components/peoplePositioning')
    },
    mixins: [listMixin],
    data() {
      return {
        activeName: 'peoplePositioning',
        // 查询部分
        peopleFilter: {
          'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
          'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
          'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
          'autoGateId': {
            label: '展示闸机数据', placeholder: '请选择是否展示闸机数据', type: 'select', arr: [
              { label: '展示', value: 1 },
              { label: '不展示', value: 2 }
            ]
          },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        },
        peopleKeyList: [
          'employee.accessCardID',
          'employee.name',
          'employee.rfid',
        ],
        // 部门下拉框
        dptList: [],
        // 部门下拉框
        areaList: [],
        // 工种下拉框
        workList: [],
        // 查询部分
        carFilter: {
          'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
          'autoGateId': {
            label: '展示闸机数据', placeholder: '请选择是否展示闸机数据', type: 'select', arr: [
              { label: '展示', value: 1 },
              { label: '不展示', value: 2 }
            ]
          },
          keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
        },
        carKeyList: [
          'car.plateNumber',
          'car.carType',
          'car.rfid'
        ],
      }
    },
    computed: {
      ...mapGetters(['pageData', 'gateSwaitch'])
    },
    mounted() {
      // 查询搜索框
      this.threeList()
    },
    methods: {
      // 查询
      searchHandle(value) {
        this.handleSearch(value)
      },
      // 重置
      async resetHandle(value) {
        let num = this.pageData + 1
        await this.$store.dispatch('user/setPageData', num)
        await this.handleSearch(value)
        num = this.pageData + 1
        this.$store.dispatch('user/setPageData', num)
      },
      // 部门
      async dptHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await department('post', obj, false)
          if (res.code === 200) {
            // this.dptList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.dptList = []
            res.data.items.forEach(item => {
              this.dptList.push({
                label: item.deptName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.dptList = []
        }
      },
      // 区域
      async areaHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await area('post', obj, false)
          if (res.code === 200) {
            // this.areaList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.areaList = []
            res.data.items.forEach(item => {
              this.areaList.push({
                label: item.name,
                value: item.id,
                isForGate: item.isForGate
              })
            })
          }
        } catch (err) {
          this.areaList = []
        }
      },
      // 工种
      async workHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await work('post', obj, false)
          if (res.code === 200) {
            // this.workList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.workList = []
            res.data.items.map(item => {
              this.workList.push({
                label: item.workName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.workList = []
        }
      },
      // 查询部门，区域，工种
      async threeList() {
        await this.areaHandler()
        await this.dptHandler()
        await this.workHandler()
        this.$nextTick(() => {
          this.peopleFilter = {
            'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
            'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
            'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
            'autoGateId': {
              label: '展示闸机数据', placeholder: '请选择是否展示闸机数据', type: 'select', arr: [
                { label: '展示', value: 1 },
                { label: '不展示', value: 2 }
              ]
            },
            keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
          }
          this.carFilter = {
            'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
            'autoGateId': {
              label: '展示闸机数据', placeholder: '请选择是否展示闸机数据', type: 'select', arr: [
                { label: '展示', value: 1 },
                { label: '不展示', value: 2 }
              ]
            },
            keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__header {
    margin: 0 0;
  }
</style>
